<template>
    <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group name="breadcrumb">
            <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
                <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
                <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
</template>

<script setup>
    const route = useRoute();
    const router = useRouter();
    const levelList = ref([])

    function getBreadcrumb() {
        // only show routes with meta.title
        let matched = route.matched.filter(item => item.meta && item.meta.title);
        const first = matched[0]
        // 判断是否为首页
        if (!isDashboard(first)) {
            matched = [{path: '/index', meta: {title: '首页'}}].concat(matched)
        }

        levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    }

    function isDashboard(route) {
        const name = route && route.name
        if (!name) {
            return false
        }
        return name.trim() === 'Index'
    }

    function handleLink(item) {
        const {redirect, path} = item
        if (redirect) {
            router.push(redirect)
            return
        }
        router.push(path)
    }

    watchEffect(() => {
        // if you go to the redirect page, do not update the breadcrumbs
        if (route.path.startsWith('/redirect/')) {
            return
        }
        getBreadcrumb()
    })
    getBreadcrumb();
</script>

<style lang='scss' scoped>
    .app-breadcrumb.el-breadcrumb {
        display: inline-block;
        font-size: 14px;
        line-height: 50px;
        margin-left: 8px;

        .no-redirect {
            color: #97a8be;
            cursor: text;
        }
    }
</style>